<template>
  <view style="background-color: #fff; height: 100%">
    <uni-section titleFontSize="20px" :title="data.form.romName" type="line">
      <template v-slot:default>
        <uni-row>
          <uni-col :span="10" :offset="1">
            <image style="width: 100px; height: 100px; background-color: #eeeeee" :src="data.form.thumbnail"></image>
          </uni-col>
          <uni-col :span="10" :offset="1">
            <uni-title type="h5" color="red" :title="`开始：${data.form.beginDate}`"></uni-title>
            <uni-title type="h5" color="red" :title="`结束：${data.form.endDate}`"></uni-title>
          </uni-col>
        </uni-row>
      </template>
    </uni-section>
    <uni-section titleFontSize="20px" :title="data.form.paper.paperName" type="line">
      <template v-slot:default>
        <uni-row>
          <uni-col :span="20" :offset="4">
            <uni-title type="h5" color="red" :title="`试题总分：${data.form.paper.examScore} 分`"></uni-title>
            <uni-title type="h5" color="red" :title="`考试时长：${data.form.paper.examTime} 分钟`"></uni-title>
            <uni-title type="h5" color="red" :title="`及格分数：${data.form.paper.passLine} 分`"></uni-title>
          </uni-col>
        </uni-row>
      </template>
    </uni-section>
    <uni-section titleFontSize="20px" title="考试须知" type="line">
      <view style="margin-left: 10px">
        <uni-row>
          <uni-col :span="23" :offset="1">
            <uni-title type="h5" title="1、点击开始考试后将自动进入考试，请遵守考场纪律诚信考试。"></uni-title>
            <uni-title
              type="h5"
              :title="`2、考试试题，共${1}题，总分${data.form.paper.examScore}分，${data.form.paper.passLine}分及格。`"
            ></uni-title>
            <uni-title type="h5" :title="`3、考试任务，需在${data.form.paper.examTime}分钟内完成考试任务并并提交。`"></uni-title>
          </uni-col>
        </uni-row>
      </view>
    </uni-section>

    <view style="display: flex; justify-content: center; align-items: center">
      <view style="width: 70%">
        <button style="margin-top: 40px" :loading="data.loading" :disabled="data.loading" type="warn" @click="beginExam()">开始考试</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { examromApi, examromaApi } from '@/api/business/exam/exrom-api';
  import { SmartToast } from '@/lib/smart-support';
  import { useUserStore } from '@/store/modules/system/user';

  const userStore = useUserStore();

  const props = defineProps({
    docEntry: String,
  });

  const data = reactive({
    form: {
      beginDate: '',
      endDate: '',
      paper: {},
      examroma: {
        lineStatus: 'C',
      },
    },
    loading: false,
  });

  function queryList() {
    examromApi.myInfo(props.docEntry).then((res) => {
      data.form = res.data;
    });
  }

  onShow(() => {
    queryList();
  });

  function beginExam(item) {
    /**
     *1、判断考场是否开启
     *2、判断是否在考试期间
     *3、初始化开始日期
     */
    data.loading = true;

    if (data.form.docStatus === 'O' || data.form.docStatus === 'L') {
      if (new Date().getTime() >= new Date(data.form.beginDate).getTime() && new Date().getTime() <= new Date(data.form.endDate).getTime()) {
        if (data.form.examroma.lineStatus === 'L' || data.form.examroma.lineStatus === 'O') {
          examromaApi.openExam(props.docEntry).then((res) => {
            uni.navigateTo({ url: `/pages/exrom/exromb?docEntry=${props.docEntry}` });
            data.loading = false;
          });
        } else {
          SmartToast.error('考试已完成！');
        }
      } else {
        SmartToast.error('未在考试期间！');
      }
    } else {
      SmartToast.error('考场未开启！');
    }
  }
</script>

<style scoped>
  .uni-title__box {
    padding: 0;
  }

  page {
    height: 100%;
  }

  .scroll-Y {
    height: 100%;
  }

  .scroll-view-item {
    height: 500rpx;
    line-height: 500rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .chooseStyle {
    background-color: #cccccc;
  }
</style>
